// 词云API数据格式要求：
// {
//   code: 200,
//   message: 'success',
//   data: [
//     { name: '希望', value: 120 },
//     { name: '自由', value: 100 },
//     ...
//   ]
// }
// 如果API可用则优先显示API数据，否则显示默认数据

// 当DOM加载完成后执行初始化函数
// 监听DOM内容加载完成事件
document.addEventListener('DOMContentLoaded', function() {
    // 获取词云图容器元素
    const chartDom = document.getElementById('wordCloud'); // 获取词云图的DOM节点
    // 新增：动态插入标题
    let titleDiv = document.createElement('div'); // 创建标题div
    titleDiv.innerText = '电影简介高频词云'; // 设置标题文本
    titleDiv.style.cssText = `
        color: #fff;
        font-size: 5px;
        text-align: center;
        margin-bottom: 8px;
        font-weight: bold;
        letter-spacing: 2px;

    `; // 设置标题样式
    chartDom.parentNode.insertBefore(titleDiv, chartDom); // 将标题插入到词云图容器前面

    // 不要设置 chartDom.style.height
    // chartDom.style.height = '400px'; // 注释或删除

    // 初始化ECharts实例
    const chart = echarts.init(chartDom); // 初始化ECharts实例

    // 添加窗口大小改变事件监听，实现响应式
    window.addEventListener('resize', function() {
        chart.resize(); // 窗口大小变化时自适应图表
    });

    // 显示加载动画
    chart.showLoading({
        text: '词云加载中...',  // 加载提示文字
        color: '#14c8fd',      // 加载动画颜色
        textColor: '#fff',     // 文字颜色
        maskColor: 'rgba(13, 26, 45, 0.8)'  // 遮罩层颜色
    });

    // 定义词云图使用的颜色数组
    const colors = [
        // 蓝色系
        '#1E90FF', // 道奇蓝
        '#00BFFF', // 深天蓝
        '#87CEEB', // 天蓝色
        '#4169E1', // 皇家蓝
        '#0000FF', // 纯蓝
        '#6495ED', // 矢车菊蓝
        '#00CED1', // 深青色
        '#5F9EA0', // 军校蓝
        '#4682B4', // 钢青色
        '#B0E0E6', // 粉蓝色
        '#ADD8E6', // 亮蓝色
        '#87CEFA', // 亮天蓝色
        '#40E0D0', // 绿松石色
        '#48D1CC', // 中绿松石色
        '#7B68EE', // 中板岩蓝
        '#6A5ACD', // 板岩蓝
        '#4876FF', // 亮蓝
        '#1E90FF', // 闪蓝
        
        // 紫色系
        '#8A2BE2', // 紫罗兰色
        '#9370DB', // 中紫色
        '#8B008B', // 深洋红
        '#9932CC', // 暗兰花紫
        '#BA55D3', // 中兰花紫
        '#DA70D6', // 兰花紫
        '#EE82EE', // 紫罗兰
        '#FF00FF', // 洋红
        '#FF69B4', // 热粉红
        
        // 绿色系
        '#32CD32', // 酸橙绿
        '#00FF7F', // 春绿
        '#3CB371', // 中海绿
        '#20B2AA', // 浅海绿
        '#48D1CC', // 中绿松石
        '#40E0D0', // 绿松石
        '#7FFFD4', // 碧绿色
        '#66CDAA', // 中绿宝石
        '#2E8B57', // 海洋绿
        
        // 暖色系
        '#FF4500', // 橙红色
        '#FF6347', // 番茄色
        '#FF7F50', // 珊瑚色
        '#FFA500', // 橙色
        '#FFD700', // 金色
        '#DAA520', // 金菊色
        '#B8860B', // 暗金菊色
        '#CD853F', // 秘鲁色
        '#DEB887', // 实木色
        
        // 红色系
        '#DC143C', // 猩红色
        '#B22222', // 砖红色
        '#CD5C5C', // 印度红
        '#E9967A', // 暗鲑鱼色
        '#FA8072', // 鲑鱼色
        '#FFA07A', // 浅鲑鱼色
        '#FF6B6B', // 印度红
        '#FF8C00', // 深橙色
        '#FF4500'  // 橙红色
    ];

    // 默认数据，当API不可用时使用
    let baseData = [
        { name: '希望', value: 120 },  // name: 词语, value: 权重/大小
        { name: '自由', value: 100 },
        { name: '人生', value: 80 },
        { name: '爱情', value: 70 },
        { name: '梦想', value: 60 },
        { name: '成长', value: 55 },
        { name: '命运', value: 50 },
        { name: '家庭', value: 45 },
        { name: '勇气', value: 40 },
        { name: '冒险', value: 35 },
        { name: '友谊', value: 30 },
        { name: '孤独', value: 28 },
        { name: '奋斗', value: 25 },
        { name: '信仰', value: 22 },
        { name: '奇幻', value: 20 },
        { name: '战争', value: 18 },
        { name: '成长', value: 15 },
        { name: '正义', value: 12 }
    ];

    // 获取词云数据
    function fetchWordCloudData() {
        console.log('开始获取词云数据...'); // 控制台输出
        // 发送API请求获取词云数据
        fetch('/api/wordCloud')
            .then(response => {
                console.log('收到响应:', response.status, response.statusText); // 输出响应状态
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`); // 抛出HTTP错误
                }
                return response.json(); // 解析JSON
        })
            .then(data => {
                console.log('接口返回原始数据:', data); // 输出原始数据
                
                // 处理数据格式
                let wordData;
                if (data && data.code === 200 && Array.isArray(data.data)) {
                    console.log('使用API返回的数据');
                    wordData = data.data;
                } else if (Array.isArray(data)) {
                    console.log('使用直接返回的数组数据');
                    wordData = data;
                } else {
                    console.error('数据格式不正确:', data);
                    console.log('使用默认数据');
                    wordData = baseData;
                }

                // 验证数据格式
                if (wordData.length > 0) {
                    const firstItem = wordData[0];
                    if (!firstItem.name || typeof firstItem.value !== 'number') {
                        console.error('数据项格式不正确:', firstItem);
                        console.log('使用默认数据');
                        wordData = baseData;
            }
                } else {
                    console.warn('获取到的数据为空，使用默认数据');
                    wordData = baseData;
                }

                console.log('最终使用的词云数据:', wordData);
                if (wordData !== baseData) {
                    baseData = wordData; // 更新默认数据
                }
                
            // 渲染词云
            chart.hideLoading(); // 隐藏加载动画
            chart.setOption(createOption()); // 设置词云图配置
            startRefresh(); // 启动自动刷新
            })
            .catch(error => {
                console.error('获取词云数据失败:', error); // 输出错误
                console.log('使用默认数据');
                // 使用默认数据渲染
                chart.hideLoading();
                chart.setOption(createOption());
                startRefresh();
        });
    }

    // 处理数据函数：为每个词添加随机颜色和大小
    function processData() {
        return baseData.map(function(item) {
            // 随机调整value值，使字体大小在原始值的0.8-1.2倍之间变化
            const randomValue = item.value * (0.8 + Math.random() * 0.4);
            // 随机字体大小
            const fontSize = Math.floor(18 + Math.random() * 42); // 18-60之间
            // 随机旋转角度
            const rotation = Math.floor(Math.random() * 360) - 180; // -180到180度
            // 随机字体粗细
            const fontWeight = Math.random() > 0.5 ? 'bold' : 'normal';
            
            return {
                name: item.name,           // 词语名称
                value: randomValue,        // 随机调整后的权重
                textStyle: {               // 文字样式
                    fontSize: fontSize,    // 随机字体大小
                    fontWeight: fontWeight,// 随机字体粗细
                    rotate: rotation       // 随机旋转角度
                }
            };
        });
    }

    // 创建词云图配置项
    function createOption() {
        return {
            backgroundColor: 'transparent', // 背景透明
            tooltip: {
                show: true, // 显示提示框
                backgroundColor: 'rgba(13, 26, 45, 0.8)', // 提示框背景色
                borderColor: '#14c8fd', // 边框颜色
                textStyle: { color: '#fff' }, // 文字颜色
                formatter: function(params) {
                    return params.name + '：' + Math.round(params.value); // 格式化提示内容
                }
            },
            series: [{
                type: 'wordCloud', // 词云类型
                gridSize: 8, // 网格大小
                sizeRange: [5, 5], // 字体大小范围
                rotationRange: [-90, 90], // 旋转角度范围
                shape: 'cardioid', // 词云形状
                left: 'center', // 居中
                top: '-5%', // 顶部位置
                width: '90%', // 宽度
                height: '90%', // 高度
                drawOutOfBound: false, // 不绘制超出部分
                textStyle: {
                    normal: {
                        fontFamily: '微软雅黑', // 字体
                        fontWeight: 'bold', // 字体粗细
                        shadowBlur: 10, // 阴影模糊
                        shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
                        color: function() {
                            return colors[Math.floor(Math.random() * colors.length)]; // 从预定义颜色数组中随机选择
                        }
                    },
                    emphasis: {
                        shadowBlur: 30, // 高亮时阴影
                        shadowColor: 'rgba(255, 255, 255, 0.5)', // 高亮阴影颜色
                        fontWeight: 'bolder' // 高亮字体粗细
                    }
                },
                data: baseData.map(function(item) {
                    return {
                        name: item.name,
                        value: item.value * (0.8 + Math.random() * 0.4), // 随机调整权重
                    };
                })
            }]
        };
    }

    // 定义自动刷新相关变量和函数
    let refreshTimer = null; // 定时器变量
    function startRefresh() {
        // 如果已有定时器，先清除
        if (refreshTimer) {
            clearInterval(refreshTimer);
        }
        // 设置新的定时器，每3秒刷新一次
        refreshTimer = setInterval(function() {
            // 添加淡出效果
            chartDom.style.transition = 'opacity 0.3s';
            chartDom.style.opacity = '0.3';

            // 300ms后执行刷新
            setTimeout(function() {
                // 只更新 series，不更新 title
                const newOption = createOption();
                chart.setOption({
                    series: newOption.series
                }, false, true); // notMerge=false, replaceMerge=true 只替换series

                // 添加淡入效果
                chartDom.style.opacity = '1';

                // 为每个词添加旋转动画
                const words = chartDom.querySelectorAll('text');
                for (var i = 0; i < words.length; i++) {
                    words[i].style.transition = 'transform 0.5s';
                    words[i].style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
                }
            }, 300);
        }, 3000);
    }

    // 获取数据并启动自动刷新
    fetchWordCloudData(); // 获取词云数据

    // 页面关闭前清理定时器和图表实例
    window.addEventListener('beforeunload', function() {
        if (refreshTimer) {
            clearInterval(refreshTimer); // 清除定时器
        }
        chart.dispose(); // 销毁ECharts实例
    });
});